<template>
	<view class="detail-container">
		<view class="content-item-wrap">
			<view class="detail-title"></view>
			<view class="detail-subtitle"></view>
			<view class="detail-subsidy-wrap">
				<view class="subsidy-item"></view>
			</view>
			<view class="detail-price"></view>
			<view class="detail-company-wrap">
				<view class="company-title"></view>
				<view class="company-address">
					<image class="address-icon" src="../../static/icon/icon_plus.png" mode="widthFix" />
					<text class="address-con"></text>
				</view>
			</view>
			<view class="detail-count flex rce">
				<text class="count-title">已招聘/招聘人数：</text>
				<text class="count-con count-con-cur"></text>
				<text class="count-con">/</text>
				<text class="count-con"></text>
			</view>
		</view>
		<view class="content-item-wrap">
			<view class="wrap-item-con">
				<div class="con-title-wrap flex rcs">
					<image class="con-title-icon" src="../../static/icon/fenpei.png" mode="widthFix" />
					<text class="con-title-text">专业技能</text>
				</div>
				<view class="con-content-wrap text-j"></view>
			</view>
			<view class="wrap-item-con">
				<div class="con-title-wrap flex rcs">
					<image class="con-title-icon" src="../../static/icon/fenpei.png" mode="widthFix" />
					<text class="con-title-text">工作描述</text>
				</div>
				<view class="con-content-wrap text-j"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad(option) {
			if (option) {
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="stylus">
	.detail-container {

		.content-item-wrap {
			background: #FFFFFF;
			padding: 40rpx 30rpx;
			margin-bottom: 20rpx;
			.detail-title {
				color: #333333;
				font-size: 36rpx;
			}

			.detail-subtitle {
				color: #666666;
				font-size: 26rpx;
			}

			.detail-subsidy-wrap {
				.subsidy-item {
					margin: 6rpx;
					color: #C6D2FF;
					font-size: 26rpx;
					padding: 4rpx 10rpx;
					border-radius: 4rpx;
					border: 1rpx solid #DBDBDB;
				}
			}

			.detail-price {
				color: #FF0000;
				font-size: 30rpx;
			}

			.detail-company-wrap {
				padding: 30rpx;
				margin: 20rpx 0;
				background: #FFFFFF;
				box-shadow:0rpx 4rpx 12rpx 0rpx rgba(0,0,0,0.1);
				.company-title {
					color: #333333;
					font-size: 30rpx;
				}

				.company-address {}

				.address-icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				.address-con {
					color: #666666;
					font-size: 28rpx;
				}
			}

			.detail-count {

				font-size: 30rpx;
				.count-title {
					color:#666666;
				}
				.count-con {
					color: #333333;
				}
				.count-con-cur {
					color: #3A63FF;
				}
			}

				.wrap-item-con {

					.con-title-wrap {

						.con-title-icon {
							width: 40rpx;
							height: 40rpx;
							margin-right: 20rpx;
						}

						.con-title-text {
							color: #333333;
							font-size: 36rpx;
						}
					}

					.con-content-wrap {}
				}
		}
	}
</style>
